<template>
  <div class="my-animation">
    <h2>我是动画页面</h2>
    <el-input
      v-model="input"
      placeholder="输入内容，回车添加"
      @keyup.enter.native="addData"
    ></el-input>
    <ul class="list">
      <transition-group>
        <li v-for="item in data" :key="item.id">
          {{ item.text }}
          <el-button type="danger" @click="deleteData(item.id)">删除</el-button>
        </li>
      </transition-group>
    </ul>
  </div>
</template>

<script>
import { nanoid } from "nanoid";
export default {
  data() {
    return {
      input: "",
      data: [],
    };
  },
  created() {},
  methods: {
    addData() {
      this.data.push({
        id: nanoid(),
        text: this.input,
      });
    },
    deleteData(id) {
      this.data = this.data.filter((item) => item.id !== id);
    },
  },
};
</script>

<style scoped lang="less">
.my-animation {
  @keyframes enter {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(0);
    }
  }
  @keyframes leave {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }
  .el-input {
    width: 300px;
  }
  .list {
    width: 400px;
    margin: 20px auto 0;
    li {
      border: 1px solid #ccc;
      text-align: left;
      height: 40px;
      &:hover {
        .el-button {
          display: block;
        }
      }
    }
    .v-enter-active {
      animation: enter 0.5s;
    }
    .v-leave-active {
      animation: leave 0.5s;
    }
    .el-button {
      float: right;
      display: none;
    }
  }
}
</style>
